<template>
  <el-dialog
    title="视频预览"
    :visible.sync="visible"
    width="50%"
    @close="onClose"
  >
    <video
      v-if="videoUrl"
      :src="videoUrl"
      controls
      style="width: 100%;"
    >
      您的浏览器不支持播放视频。
    </video>
  </el-dialog>
</template>

<script>
export default {
  name: "VideoPreviewDialog",
  data(){
    return {
      visible: false,
      videoUrl: null,
    }
  },
  methods: {
    open(videoUrl) {
      console.log(videoUrl);
      this.visible = true;
      this.videoUrl = videoUrl;
    },
    onClose() {
      // 停止视频播放并清除视频地址
      const videoElement = this.$refs.video;
      if (videoElement) {
        videoElement.pause(); // 停止视频播放
        videoElement.currentTime = 0; // 复位视频进度
      }
      this.videoUrl = null; // 清空视频地址
      this.visible = false;
      this.$emit("update:visible", false); // 关闭对话框
      this.$emit("reset");
    },
  },
};
</script>

<style scoped>
/* 可以根据需求定义额外样式 */
</style>
